<template>
  <div class="task-detail">
    <div class="mb-24">
      <pk-button type="default" :icon="Back" @click="goBack">返回任务列表</pk-button>
    </div>
    <div class="task-detail-title f-18">
      {{detailData?.taskDetail?.taskName}}
    </div>
    <div class="task-detail-tagbox mt-12 flex-row flex-wrap">
      <div v-for="(item,index) in detailData?.taskDetail?.scoreOptionsList" :key="index" class="mr-12 mb-12"> 
        <el-tag
          type="primary"
          effect="plain"
          round
        >
        <span class="mr-4">{{ item.name }}</span><span>{{ item.scoreNum }}</span>
        </el-tag>
      </div> 
    </div>

    <div class="w-500 mt-24">
      <pk-table :tableConfig="tableConfig" :data="detailData?.userScoreList" @onSize="onSize" :total="total" :isPage="false">
        <template #index="scope">
          <div v-if="scope.index <=2" class="task-detail-topative"></div>
          <div v-else class="task-detail-topdefault">{{ scope.index + 1 }}</div>
        </template>
        <template #username="{row}">
          <div>{{row?.userInfo?.username}}</div>
        </template>
        <template #score="{row}">
          <div @click="setUser(row)">{{ row.score }}</div>
        </template>
      </pk-table>
    </div> 
    <score-record :curData="curData" v-if="isRecode" @onClose="isRecode=false"></score-record>
  </div>
</template>
<script setup>
  import { ref, onMounted } from 'vue' 
  import PkButton from '@/components/pkui/pk-button/pk-button.vue'
  import pkTable from '@/components/pkui/pk-table/pk-table.vue'
  import { Back, View, Plus } from '@element-plus/icons-vue'
  import { taskViewRanking } from '@/api/api'
  import { useRouter, useRoute } from 'vue-router'
  import scoreRecord from './component/scoreRecord.vue'
  const isRecode = ref(false)
  const router = useRouter()
  const route = useRoute()
  const curData = ref({})
  const options = ref([])
  const detailData = ref({})
  const tableData = ref([])
  const lock = ref(false)
  const tableConfig = ref([
    {
      label: '排行',
      type: 'slot',
      slotName: 'index',
      width: '80px'
    },
    {
      label: '名称',
      type: 'slot',
      slotName: 'username'
    },
    {
      label: '平均分',
      type: 'slot',
      slotName: 'score'
    }
  ])
  const getDetail = () => {
    const { id } = route.query
    taskViewRanking({
      id
    }).then(res => {
      detailData.value = res.resData
    }) 
  }

  const goBack = () => {
    router.go(-1)
  }

 const setUser = (e) => {
  curData.value = e
  isRecode.value = true
 }

  onMounted(() => {
    getDetail()
  })
</script>
<style lang="scss">
  .task-detail{
    &-title{

    }
    &-topative{
      width: 30px;
      height: 30px;
      background: url('@/assets/top.png') center center no-repeat;
      background-size: 30px auto;
    }

    &-topdefault{
      width: 30px;
      height: 30px;
      background:#f1f1f1;
      border-radius: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      color: #999;
    }
  }
</style>